<!--  -->
<template>
  <div class="featSwiperVideo">
    <!-- feat:伦比图 -->
    <viewer :images="objInfo.companyFileOutVoList">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(imgList, index) in objInfo.companyFileOutVoList" :key="index"
            v-show="imgList.auditStatus == 2">
            <!-- <img :src="imgList.filePath" alt=""> -->
            <img :src="imgList.filePath">
          </div>
        </div>
      </div>
    </viewer>
    <!-- 视频播放器 -->
    <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"
      v-show="objInfo.companyFileOutVo && objInfo.companyFileOutVo.auditStatus == 2">
    </video-player>
  </div>

</template>

<script>
import Swiper from 'swiper';
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
// feat: 轮播图
import '../../../assets/css/swiper.min.css';
export default {
  components: {
    videoPlayer
  },
  props: {
    objInfo: {
      type: Object,
      default: {}
    },
    fileUrl: {
      type: String,
      default: ''
    }
  },
  watch: {
    objInfo: {
      handler (newVal, oldName) {
        console.log(newVal)
        if (newVal.companyFileOutVo && newVal.companyFileOutVo.auditStatus == 2) {
          this.$set(this.playerOptions.sources, 0, {
            type: "video/mp4",
            src: newVal.companyFileOutVo.filePath
          })
          this.swiperContainer()
        }
      },
      // immediate: true,
      deep: true
    }
  },
  data () {
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0, 3.0, 5.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        // 这里可以增加视频类型 例如：MP4,wmv,qlv等等 
        sources: [
          {
            // src: "//path/to/video.mp4", // 路径
            src: "https://vdept.bdstatic.com/61794741396e53364839794658534337/6b7170526e686641/9a12467508ba71b61dfceb93c5521eee50519a0aa0cf4f691b221a25e1bdac96b9b67dd1d99720c6cf04f2e755c1b7383fae4b5e10d5faaa5a78cba56d847fed.mp4?auth_key=1591698368-0-0-12ce3b2a38933b490fe40c5e227d4fcf", // 路径
            type: "video/mp4" // 类型
          },
          {
            src: "",
            type: "video/mov"
          },
          {
            src: "",
            type: "video/avi"
          }
        ],
        poster: "", // 如果有 封面地址 那就把封面图片架构来 后期产品新增功能或者优化 可能会有，我先把功能加进来
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,// 当前时间和持续时间的分隔符
          durationDisplay: true,// 显示持续时间
          remainingTimeDisplay: false,// 是否显示剩余时间功能
          fullscreenToggle: true  // 全屏按钮
        }
      }
    };
  },
  computed: {},
  methods: {
    // feat: 企业风采 轮播图
    swiperContainer () {
      var mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 4.6,
        spaceBetween: 20,
        centeredSlides: false,
        loop: false,
        autoplay: 5000
        //spaceBetween : '10%',按container的百分比
      })
    },
  },
  created () {

  },
  mounted () {
    // 视频接口地址
    // console.log(this.objInfo)
    // this.$set(this.playerOptions.sources, 0, {
    //   type: "video/mp4",
    //   src: this.objInfo.companyFileOutVo.filePath
    // })
    // 或
    // this.playerOptions['sources'][0]['src'] = '接口地址';
  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () {
    this.swiperContainer()
  },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style  scoped>
/* feat: 轮播图 样式 */
.swiper-container {
    height: 100px !important;
    margin-bottom: 20px;
}
.swiper-wrapper .swiper-slide {
    width: 160px;
    height: 90px;
    line-height: 90px;
    opacity: 1;
    text-align: center;
    /* border: 1px solid rgba(232, 232, 232, 1); */
}

.swiper-wrapper .swiper-slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* feat：样式表，设置播放按钮的形状与位置： */
.featSwiperVideo /deep/ .video-js .vjs-big-play-button {
    top: 50% !important;
    left: 50% !important;
    margin-left: -45px !important;
    margin-top: -24px !important;
    border: 0 solid rgba(43, 51, 63, 0.7);
    /* background-color: none; */
    background-color: rgba(43, 51, 63, 0);
}

.featSwiperVideo /deep/ .video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 {
    width: 50%;
    max-width: 50%;
    padding-top: 28.25%;
}

.featSwiperVideo /deep/ .vjs_video_3-dimensions.vjs-fluid {
    padding-top: 28.25%;
}
</style>